import React, { useState, useRef } from 'react';
import classnames from 'classnames';
import { Form, MessagePlugin, Input, Checkbox, Button, FormInstanceFunctions, SubmitContext } from 'tdesign-react';
import { LockOnIcon, UserIcon, MailIcon, BrowseOffIcon, BrowseIcon } from 'tdesign-icons-react';
import useCountdown from '../../hooks/useCountDown';
import { useNavigate } from 'react-router-dom';

import Style from './index.module.less';
import TitleStyle from '../../title.module.less';
import request from 'utils/request';
import { generatePath, getEndian } from 'utils/path';


const { FormItem } = Form;

export default function Register() {
  const [showPsw, toggleShowPsw] = useState(false);
  const [showCfmPsw, toggleShowCfmPsw] = useState(false);
  const { countdown, setupCountdown } = useCountdown(60);
  const formRef = useRef<FormInstanceFunctions>();
  const navigate = useNavigate();

  function prevClick() {
    navigate(generatePath('/login'));
  }

  const onSubmit = async (e: SubmitContext) => {
    // MessagePlugin.error('请同意 TDesign 服务协议和 TDesign 隐私声明');
    if (e.validateResult === true) {
      const fieldsValue = formRef.current?.getFieldsValue?.(true);
      const res = await request.post('/api/v1/company/register', {
        company_name: fieldsValue.company_name,
        admin_name: fieldsValue.admin_name,
        admin_phone: fieldsValue.admin_phone,
        admin_password: fieldsValue.admin_password,
        verification_code: fieldsValue.verification_code,
        operator_type: getEndian(),
      });
      if (res?.code == 'OK') {
        MessagePlugin.success('注册成功');
        navigate(generatePath('/login'));
        na
      } else {
        MessagePlugin.error('注册失败');
      }
      console.log('aaaa:', res);
      // const { checked } = formRef.current?.getFieldsValue?.(['checked']) as { checked: boolean };
      // if (!checked) {
      //   MessagePlugin.error('请同意 TDesign 服务协议和 TDesign 隐私声明');
      //   return;
      // }
    }
  };

  return (
    <div>
      <div className={TitleStyle.titleContainer}>
        <h1 className={TitleStyle.title}>设置企业信息</h1>
        <div className={TitleStyle.subTitle}>
          <p className={classnames(TitleStyle.tip)}>注册新企业或组织，管理员需填写真实信息</p>
        </div>
      </div>

      <Form ref={formRef} className={classnames(Style.itemContainer)} labelWidth={0} onSubmit={onSubmit}>
        <FormItem name='company_name' rules={[{ required: true, message: '企业或组织名称必填', type: 'error' }]}>
          <Input maxlength={11} size='large' placeholder='请输入企业或组织名称' />
        </FormItem>
        <FormItem name='admin_name' rules={[{ required: true, message: '姓名必填', type: 'error' }]}>
          <Input maxlength={11} size='large' placeholder='请输入姓名' />
        </FormItem>

        <FormItem name='admin_password' rules={[{ required: true, message: '密码必填', type: 'error' }]}>
          <Input
            size='large'
            type={showPsw ? 'text' : 'password'}
            placeholder='请输入密码'
            suffixIcon={
              showPsw ? (
                <BrowseIcon onClick={() => toggleShowPsw((current) => !current)} />
              ) : (
                <BrowseOffIcon onClick={() => toggleShowPsw((current) => !current)} />
              )
            }
          />
        </FormItem>
        <FormItem name='admin_confirm_password' rules={[{ required: true, message: '确认密码必填', type: 'error' }]}>
          <Input
            size='large'
            type={showCfmPsw ? 'text' : 'password'}
            placeholder='请输入确认密码'
            suffixIcon={
              showCfmPsw ? (
                <BrowseIcon onClick={() => toggleShowCfmPsw((current) => !current)} />
              ) : (
                <BrowseOffIcon onClick={() => toggleShowCfmPsw((current) => !current)} />
              )
            }
          />
        </FormItem>
        <FormItem name='admin_phone' rules={[{ required: true, message: '手机号必填', type: 'error' }]}>
          <Input maxlength={11} size='large' placeholder='请输入手机号' />
        </FormItem>
        <FormItem name='verification_code' rules={[{ required: true, message: '验证码必填', type: 'error' }]}>
          <Input size='large' placeholder='请输入验证码' />
          <Button variant='outline' className={Style.verificationBtn} disabled={countdown > 0} onClick={setupCountdown}>
            {countdown === 0 ? '发送验证码' : `${countdown}秒后可重发`}
          </Button>
        </FormItem>
        <FormItem>
          <div style={{ display: 'flex', justifyContent: 'space-between', gap: '16px' }}>
            <Button size='large' block theme='default' variant='outline' style={{ width: '120px' }} onClick={prevClick}>
              上一步
            </Button>
            <Button size='large' block type='submit' style={{ width: '264px' }}>
              确定
            </Button>
          </div>
        </FormItem>
      </Form>
    </div>
  );
}
